<template>
  <div class="screeBox" :style="{transform:'scale('+scaleNum+')','transform-origin':'0px 0px'}">
    <div class="screen_top">
      <span v-if="isChina" class="text" :class="{'textUS': isChina !== 'zh_CN'}">{{ $t('CAPEX DASHBOARD') }}</span>
      <div class="logo">
       <span class="imgBox" @click="goChooseBoard" v-focusable>
            <img src="~images/bigScreen/collectScreen/title.png"/>
       </span>
     </div>
      <div class="timeBox">
        <span class="time_text">{{ timeText }}</span>
      </div>
    </div>
    <div class="screen_main">
      <div class="main_row">
        <Row>
          <Col span="24">
            <div class="mainTop">
              <Row>
                <Col span="7">
                  <div class="mainTop_left">
                    <div class="left_title"></div>
                    <div class="left_box">
                      <div class="boxcontent">
                      <span class="text">
                        {{`Budget Availability-${bdgAmount.unBbdgApprovalAmount}kRMB`}}
                      </span>
                        <div class="textinfo">
                          <span class="num">{{ bdgAmount.bdgApprovalAmount }}</span>
                          <span class="unit">KRMB</span>
                        </div>
                        <div class="circle">
<!--                          <img src="~images/bigScreen/capExScreen/zhi.png" alt/>-->
                        </div>
                      </div>
                    </div>
                  </div>
                </Col>
                <Col span="17">
                  <div class="mainTop_right">
                    <div class="right_title"></div>
                    <div class="right_box">
                      <div class="boxItem" v-for="(item,index) in bdgList" :key="index">
                        <span class="top">{{ item.floor }} paid</span>
                        <span class="cen">{{ item.bdgAmount }}</span>
                        <span class="bot">kRMB</span>
                      </div>
                    </div>
                  </div>
                </Col>
              </Row>
            </div>
          </Col>
          <Col span="24">
            <div class="mainChart">
              <div class="chart_title"></div>
              <div class="chart_box">
                <template v-if="chartData && chartData.length">
                  <capexChart ref="capexChart" :workShopName="workShopName"/>
                </template>
                <div class="btnBox">
                  <div class="item left">
                    <span class="ico"></span>
                    <span class="text">actual</span>
                  </div>
                  <div class="item right">
                    <span class="ico"></span>
                    <span class="text">Plan</span>
                  </div>
                </div>
              </div>
            </div>
          </Col>
          <Col span="24">
            <div class="mainBot">
              <div class="top">
                <template  v-for="(item,index) in workshopList">
                  <div class="item"
                       style="cursor: pointer;"
                       @click="selectClcik(index)"
                       :class="{active:workShopIndex===index}"
                       :key="index">
                    <span  style="cursor: pointer;"  @click="selectClcik(index)">{{ item.name }}</span>
                  </div>
                </template>
              </div>
              <div class="bot btmBg">
<!--                <img src="" alt/>-->
              </div>
            </div>
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
import capexChart from './components/capexChart'

let timer = null;
export default {
  name: "capExScreen",
  components: {capexChart},
  data() {
    return {
      workShopName:"",
      chartData: [],
      componentKey: 0,
      isChina: '',
      dataList: [
        {zhCN: 'Line1', enUS: 'C M X', title: 'CMX', listInfo: {}},
        {zhCN: 'Line2', enUS: 'C C A', title: 'CCA', listInfo: {}},
        {zhCN: 'Line3', enUS: 'C E P', title: 'CEP', listInfo: {}},
        {zhCN: 'Line4', enUS: 'C E P', title: 'CEP', listInfo: {}},
      ],
      showList: false,
      scaleNum: '',
      timeText: "",
      createTimeId: null,
      bdgAmount: 0,
      bdgList: [],
      bdgMonthList: [],
      workShopIndex:0,
      workshopList:[]
    }
  },
  beforeDestroy() {
    clearTimeout(timer)
    timer = null
    clearInterval(this.createTimeId)
  },
  mounted() {

    this.getBdg()
    this.getBdgList()
    this.getWorkshop()
    this.isChina = localStorage.getItem('language')
    this.createTimeId = setInterval(this.refreshTime, 1000);
    this.onresize()
    window.addEventListener('resize', this.onresize, false);
    // let queryInfo = this.$route.query
    // if (queryInfo && queryInfo.hierarchyCode) {
    //   this.getDataList(queryInfo.hierarchyCode)
    //   this.getReportQ(queryInfo.hierarchyCode)
    // }
  },
  methods: {
    goChooseBoard(){
      this.$router.push({ path: '/chooseBoard'})
    },
    chinaClick() {
      if (this.isChina === 'zh_CN') {
        this.isChina = 'en_US'
        window.localStorage.setItem('language', 'en_US')
      } else {
        this.isChina = 'zh_CN'
        window.localStorage.setItem('language', 'zh_CN')
      }
      this.$i18n.locale = this.isChina
      localStorage.setItem('language', this.isChina)
      this.componentKey += 1
    },
    refreshTime() {
      this.timeText = this.$moment(new Date()).format(' YYYY-MM-DD HH:mm:ss');
    },
    //计算缩放
    onresize() {
      const Width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      const Height = window.innerHeight || document.documentElement.clientWidth || document.body.clientHeight;
      const scaleW = Width < 1920 ? (Width / 1920) : 1;
      const scaleH = Height < 1080 ? (Height / 1080) : 1;
      this.scaleNum = scaleW > scaleH ? scaleH : scaleW
    },
    getBdg() {
      this.axios({
        method: 'get',
        url: '/dms/capex/bdgAmountSum',
      }).then(res => {
        if (res.code === 200) {
          this.bdgAmount = res.data || 0
        }
      })

    },
    getBdgList() {
      this.axios({
        method: 'get',
        url: '/dms/capex/bdgAmountByFloor',
      }).then(res => {
        if (res.code === 200) {
          this.bdgList = res.data || []
        }
      })

    },
    selectClcik(index){
      if (timer){
        clearTimeout(timer)
      }
      this.workShopIndex = index
      this.getBdgMonthList()
    },
    getBdgMonthList() {
      this.axios({
        method: 'get',
        url: '/dms/capex/bdgAmountByMonth',
        params:{
          hierarchyCode: this.workshopList[this.workShopIndex].code
        }
      }).then(res => {
        if (res.code === 200) {
          this.chartData = res.data
          this.workShopName = this.workshopList[this.workShopIndex].name
          this.$nextTick(()=>{
            this.$refs.capexChart.initChart(this.chartData)
          })
          this.intervalGetMonth()
        }
      })
    },
    getWorkshop() {
      this.axios({
        method: 'get',
        url: '/dms/capex/findListByTokenAndDict?level=3',
      }).then(res => {
        if (res.code === 200) {
          this.workshopList = res.data || []
          this.getBdgMonthList()
        }
      })
    },
    intervalGetMonth(){
      if (timer){
        clearTimeout(timer)
      }
      timer = setTimeout(()=>{
        this.workShopIndex++
        if (this.workShopIndex > this.workshopList.length-1) this.workShopIndex = 0
        this.workShopName = this.workshopList[this.workShopIndex].name
        this.getBdgMonthList()
      },60000)
    },
  }
}
</script>

<style scoped lang="scss">
@import "./styles/capex.scss";
</style>
